<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <style type="text/css">
    /*设置所有元素不会被撑大 ,并且盒子的宽高是边框的宽高 设置margin=0，padding=0*/
    * {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
    }
    body{
      background: gray;
    }
    body > div {
      /*最外层容器指定大小,边框，水平居中, */
      width: 850px;
      height: 400px;
      background-color: rgb(255, 255, 255);
      border: gray solid 8px;
      margin: 60px auto;
    }

    /* -------------------------------------------------------- */
    /*左浮动*/
    .left {
      float: left;
      width: 25%;
      margin-left: 20px;
      margin-top: 20px;
    }

    .first {
      font-size: 20px;
      color: #8c00ff;

    }

    .left p:last-child {
      font-size: 20px;
      color: gray;
    }

    /* -------------------------------------------------------- */

    .mid {
      font-size: 15px;
      float: left;
      width: 47%;
    }

    .table {
      margin-top: 25px;
      float: left;
    }

    .t-left {
      /*文字靠左边*/
      text-align: left;

    }

    .t-right {
    }

    /* 表单中的文本框，日期框，密码框使用属性选择器，宽256，高32，行高32，内边距上下6，左右12，
    圆角4，边框：1 实线 颜色#a6a6a6，右浮动*/
    input[type="text"], input[type="date"], input[type="password"], input[type="radio"]，input[type="occupation"],input[type="submit"],input[type="reset"]{
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 4px; /*圆角*/
      border: gray solid 1px;
      margin-left: 30px; /*指定左边距，调节左边距的距离*/
    }

    input[type="radio"] {
    }

    /* -------------------------------------------------------- */
    .right {
      float: right;
      width: 25%;
    }

    .right p {
      font-size: 15px;
      padding: 10px 10px 0px 0px;
      float: right;
      margin-left: 30px;
    }
  </style>
</head>

<body>
<div>
  <div class="left">
    <p class="first">用户登录</p>
  </div>
  <div class="mid">
    <div class="table">
      <form action="login.do" method="post">
        <table>
          <tr><!--第1行-->
            <td class="t-left">
              <lable for="username">用户名</lable>
            </td>
            <td class="t-right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
          </tr>
          <tr><!--第2行-->
            <td class="t-left">
              <lable for="password">密&nbsp;&nbsp;码</lable>
            </td>
            <td class="t-right"><input type="password" name="password" id="password" placeholder="请输入密码">
            </td>
          </tr>
          <tr><!--第3行-->
            <td class="t-left">性别</td>
            <td class="t-right">
              <input type="radio" name="gender" value="男">男
              <input type="radio" name="gender" value="女">女
            </td>
          </tr>
          <tr><!--第4行-->
            <td class="t-left">职业</td>
            <td class="t-right">
              <select name="occupation">
                <option>---请选择---</option>
                <option>医生</option>
                <option>老师</option>
                <option>警察</option>
                <option>律师</option>
                <option>其他</option>
              </select>

            </td>
          </tr>
          <tr align="center"><!--第5行-->
            <td colspan="1">
            <td><input type="submit" value="登录"/></td>
            <td><input type="reset" value="取消"/></td>
            </td>
          </tr>
        </table>
      </form>
    </div>
  </div>
  <!--右容器  -->
  <div class="right">
    <p>已有账号？<a href="#">立即登陆</a></p>
  </div>
</div>
</body>
</html>